<!-- 分割线-样式类型 -->
<template>
    <el-collapse modelValue="1">
        <el-collapse-item title="组件样式" name="1">
            <div class="breakline-mode-container">
                <div
                    :class="['breakline-item', { 'active': borderBottomStyle === 'solid' }]"
                    @click="borderBottomStyle = 'solid'"
                >
                    <div class="breakline-item-div">
                        <div class="solid-mode"></div>
                    </div>
                </div>
                <div
                    :class="['breakline-item', { 'active': borderBottomStyle === 'dotted' }]"
                    @click="borderBottomStyle = 'dotted'"
                >
                    <div class="breakline-item-div">
                        <div class="dotted-mode"></div>
                    </div>
                </div>
                <div
                    :class="['breakline-item', { 'active': borderBottomStyle === 'dashed' }]"
                    @click="borderBottomStyle = 'dashed'"
                >
                    <div class="breakline-item-div">
                        <div class="dashed-mode"></div>
                    </div>
                </div>
            </div>
        </el-collapse-item>
    </el-collapse>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
export default defineComponent({
    name: 'BreaklineMode',
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)

        const borderBottomStyle = computed({
            get: () => widget.value.widgetData.eles.style['border-bottom-style'],
            set: val => widget.value.widgetData.eles.style['border-bottom-style'] = val
        })

        return {
            widget,
            borderBottomStyle
        }
    }
})
</script>

<style lang="less" scoped>
.breakline-mode-container {
    .breakline-item {
        margin-top: 10px;
        padding: 8px;
        border: 1px solid var(--edit-border-color-darker);
        cursor: pointer;
        &.active {
            border-color: var(--edit-color-primary);
        }
        .breakline-item-div {
            padding: 8px;
            background-color: var(--edit-border-color);
            & > div {
                border-width: 2px;
                border-color: var(--edit-text-color-placeholder);
            }
            .solid-mode {
                border-style: solid;
            }
            .dotted-mode {
                border-style: dotted;
            }
            .dashed-mode {
                border-style: dashed;
            }
        }
    }
}
</style>